@if (content) {
  <div [ngClass]="content.iconPosition" *reqRolesIf="content">
    @switch (content.mode) {
      @case ('raised') {
        @if (!content.href) {
          <button
            [ngClass]="content.classes || ''"
            [class.pill]="content.pill"
            [disabled]="content.disabled"
            mat-raised-button
            [color]="content.color"
          >
            @if (content.icon && content.icon.svg) {
              <app-icon
                [class.order-1]="content.iconPosition === 'right'"
                [content]="content.icon"
              />
            }
            <span contentedit="label" [innerHTML]="content.label | safeHtml"></span>
          </button>
        } @else {
          <a
            [ngClass]="content.classes || ''"
            [class.pill]="content.pill"
            [disabled]="content.disabled"
            mat-raised-button
            (click)="onNav($event, content)"
            [href]="content.href"
            [target]="content.target || ''"
            [color]="content.color"
          >
            @if (content.icon && content.icon.svg) {
              <app-icon
                [class.order-1]="content.iconPosition === 'right'"
                [content]="content.icon"
              />
            }
            <span contentedit="label" [innerHTML]="content.label | safeHtml"></span>
          </a>
        }
      }
      @case ('stroked') {
        @if (!content.href) {
          <button
            [ngClass]="content.classes || ''"
            [class.pill]="content.pill"
            [disabled]="content.disabled"
            mat-stroked-button
            [color]="content.color"
          >
            @if (content.icon && content.icon.svg) {
              <app-icon
                [class.order-1]="content.iconPosition === 'right'"
                [content]="content.icon"
              />
            }
            <span contentedit="label" [innerHTML]="content.label | safeHtml"></span>
          </button>
        } @else {
          <a
            [ngClass]="content.classes || ''"
            [class.pill]="content.pill"
            [disabled]="content.disabled"
            mat-stroked-button
            (click)="onNav($event, content)"
            [href]="content.href"
            [target]="content.target || ''"
            [color]="content.color"
          >
            @if (content.icon && content.icon.svg) {
              <app-icon
                [class.order-1]="content.iconPosition === 'right'"
                [content]="content.icon"
              />
            }
            <span contentedit="label" [innerHTML]="content.label | safeHtml"></span>
          </a>
        }
      }
      @case ('flat') {
        @if (!content.href) {
          <button
            [ngClass]="content.classes || ''"
            [class.pill]="content.pill"
            [disabled]="content.disabled"
            mat-flat-button
            [color]="content.color"
          >
            @if (content.icon && content.icon.svg) {
              <app-icon
                [class.order-1]="content.iconPosition === 'right'"
                [content]="content.icon"
              />
            }
            <span contentedit="label" [innerHTML]="content.label | safeHtml"></span>
          </button>
        } @else {
          <a
            [ngClass]="content.classes || ''"
            [class.pill]="content.pill"
            [disabled]="content.disabled"
            mat-flat-button
            (click)="onNav($event, content)"
            [href]="content.href"
            [target]="content.target || ''"
            [color]="content.color"
          >
            @if (content.icon && content.icon.svg) {
              <app-icon
                [class.order-1]="content.iconPosition === 'right'"
                [content]="content.icon"
              />
            }
            <span contentedit="label" [innerHTML]="content.label | safeHtml"></span>
          </a>
        }
      }
      @case ('icon') {
        @if (!content.href) {
          <button
            [ngClass]="content.classes || ''"
            [disabled]="content.disabled"
            mat-icon-button
            [color]="content.color"
          >
            @if (content.icon && content.icon.svg) {
              <app-icon
                [class.order-1]="content.iconPosition === 'right'"
                [content]="content.icon"
              />
            }
          </button>
        } @else {
          <a
            [ngClass]="content.classes || ''"
            [disabled]="content.disabled"
            mat-icon-button
            (click)="onNav($event, content)"
            [href]="content.href"
            [target]="content.target || ''"
            [color]="content.color"
          >
            @if (content.icon && content.icon.svg) {
              <app-icon [content]="content.icon" />
            }
          </a>
        }
      }
      @case ('fab') {
        @if (content.icon && content.icon.svg) {
          <button
            [ngClass]="content.classes || ''"
            [disabled]="content.disabled"
            mat-fab
            [color]="content.color"
          >
            <app-icon [content]="content.icon" />
          </button>
        }
      }
      @case ('mini-fab') {
        @if (content.icon && content.icon.svg) {
          <button
            [ngClass]="content.classes || ''"
            [disabled]="content.disabled"
            mat-mini-fab
            [color]="content.color"
          >
            <app-icon [content]="content.icon" />
          </button>
        }
      }
      @default {
        @if (!content.href) {
          <button
            [ngClass]="content.classes || ''"
            [disabled]="content.disabled"
            mat-button
            [color]="content.color"
          >
            @if (content.icon && content.icon.svg) {
              <app-icon
                [class.order-1]="content.iconPosition === 'right'"
                [content]="content.icon"
              />
            }
            <span contentedit="label" [innerHTML]="content.label | safeHtml"></span>
          </button>
        } @else {
          <a
            [ngClass]="content.classes || ''"
            [disabled]="content.disabled"
            mat-button
            (click)="onNav($event, content)"
            [href]="content.href"
            [target]="content.target || ''"
            [color]="content.color"
          >
            @if (content.icon && content.icon.svg) {
              <app-icon
                [class.order-1]="content.iconPosition === 'right'"
                [content]="content.icon"
              />
            }
            <span contentedit="label" [innerHTML]="content.label | safeHtml"></span>
          </a>
        }
      }
    }
  </div>
}
